<template>
  <div class="dish-detail">
    <button @click="$router.go(-1)">返回</button>
    <h1>{{ dish.name }}</h1>
    <img :src="dish.image" :alt="dish.name">
    <p>价格: ¥{{ dish.price }}</p>
    <p>{{ dish.description }}</p>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      dish: {}
    }
  },
  created() {
    // 这里应该根据id从API获取菜品详情
    // 模拟数据
    const dishes = [
      {
        id: '1',
        name: '菜品1',
        price: 25,
        image: require('@/assets/dishes/dish1.jpg'),
        description: '这是菜品1的详细介绍...'
      },
      {
        id: '2',
        name: '菜品2',
        price: 30,
        image: require('@/assets/dishes/dish2.jpg'),
        description: '这是菜品2的详细介绍...'
      }
    ]

    this.dish = dishes.find(d => d.id === this.id) || {}
  }
}
</script>

<style scoped lang="scss">

</style>
